/* 公共类库 */
@import "style-variable.scss";

* {
    cursor: url(../img/normal.ico), pointer
}

@each $num in $eachnumber {
    .m-t-#{$num} {
        margin-top: #{$num}px !important;
    }

    .m-r-#{$num} {
        margin-right: #{$num}px !important;
    }

    .m-b-#{$num} {
        margin-bottom: #{$num}px !important;
    }

    .m-l-#{$num} {
        margin-left: #{$num}px !important;
    }

    .p-t-#{$num} {
        padding-top: #{$num}px !important;
    }

    .p-r-#{$num} {
        padding-right: #{$num}px !important;
    }

    .p-b-#{$num} {
        padding-bottom: #{$num}px !important;
    }

    .p-l-#{$num} {
        padding-left: #{$num}px !important;
    }
}

@each $name,
$color in $fontcolor {
    .text-#{$name} {
        color: $color !important;
    }

    .bg-#{$name} {
        background-color: $color !important;
    }
}

@each $var in $position {
    .text-#{$var} {
        text-align: $var !important;
    }
}

body {
    background-color: $bodybg;
}

.container {
    width: $maxwidth;
    position: relative;
    margin: 0 auto;
    box-sizing: border-box;
}

.d-flex {
    display: flex;
}

.bg-white {
    background-color: $bgwhite !important;
}

.bg-black {
    background-color: $bgblack !important;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.left {
    float: left !important;
}

.right {
    float: right !important;
}

.d-block {
    display: block !important;
}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
    width: 3px;
    height: 3px;
    background-color: #ff0000;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    background-color: #9a9a9a;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
    border-radius: 50px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: rgba(69, 128, 216, 0.767);

    &:hover {
        background: rgba(50, 97, 99, 0.397);
    }
}

// 排行版
.ranking {
    display: block;
    position: absolute;
    height: 25px;
    width: 25px;
    top: 0;
    line-height: 25px;
    text-align: center;
    left: 0;
    margin-top: 5px;
    font-size: 18px;
    margin-bottom: 5px;
    color: coral;
}

@each $var in $top_icon_index {
    .ranking-icon-#{$var} {
        background-size: cover;
        background-image: url("../img/top-#{$var}.svg");
    }
}

// 头像公共模板
@mixin common_avatar {

    &-avatar {
        display: block;
        overflow: hidden;
        width: 50px;
        height: 50px;
        float: left;
        margin-right: 25px;
        border-radius: 50%;

        img {
            width: 50px;
            height: 50px;
            @include img_all_animation_time;

            &:hover {
                @include img_hover_scale;
            }
        }
    }
}

// 评论底部公共模板
@mixin common_bottom {
    &-bottom {

        &-time,
        &-reply,
        &-like,
        &-report {
            line-height: 25px;
            height: 25px;
            margin-right: 15px;
            cursor: pointer;

            &:hover {
                color: $hovercolor;
            }
        }

        &-report {
            display: none;
        }
    }
}

@mixin common_nickname {

    &-nickname {
        font-size: 14px;
        padding-bottom: 5px;
        color: #339b53;
        font-weight: 600;
        cursor: pointer;

        &:hover {
            color: red;
        }
    }
}


.main {

    // 右侧公共内容
    &-container-right {

        // 标题
        &-title {
            justify-content: space-between;
            padding: 0px 20px;
            height: 35px;
            line-height: 35px;
            border-bottom: 1px solid $linecolor;

            span {
                font-size: 15px;

                a {
                    font-size: 11px;
                }
            }
        }

        // 排行版
        &-body-ranking {
            padding: 0 5px;

            &-ul {
                justify-content: space-between;
                flex-direction: column;

                a {
                    display: block;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    width: 220px;
                    height: 25px;
                    line-height: 25px;
                    margin-left: 10px;
                }

                li {
                    display: flex;
                    justify-content: space-between;
                    padding: 5px 20px;
                    width: 260px;
                    position: relative;

                    span {
                        width: 30px;
                        line-height: 25px;
                        height: 25px;
                        display: block;
                        text-align: right;
                    }
                }
            }
        }

        // 标签云
        &-body-cloud {
            &-ul {
                flex-direction: row;
                flex-wrap: wrap;
                padding: 5px;

                @each $key,
                $value in $taglist {
                    li:nth-child(7n+#{$key}) {
                        background-color: $value;
                    }
                }

                li {
                    margin-top: 6px;
                    margin-left: 5px;

                    a {
                        display: block;
                        overflow: hidden;
                        height: 25px;
                        padding: 0 5px;
                        line-height: 25px;
                        color: $bgwhite;
                    }
                }

            }
        }

        // 头像框
        &-auth {
            margin-bottom: 15px;
            position: relative;
            overflow: hidden;



            &-top {
                position: relative;
                display: block;
                padding: 0;
                -webkit-flex-shrink: 0;
                -ms-flex-negative: 0;
                flex-shrink: 0;

                &:after {
                    content: '';
                    display: block;
                    padding-top: 40%;
                }

                &-img-box {
                    position: absolute;
                    left: 50%;
                    top: auto;
                    bottom: 0;
                    -webkit-transform: translate(-50%, 50%);
                    -ms-transform: translate(-50%, 50%);
                    transform: translate(-50%, 50%);

                    img {
                        width: 76px;
                        height: 76px;
                        border-radius: 50%;
                        border: 5px solid #ffffff;
                        transition: all 0.8s;
                        -webkit-transition: all 0.8s;

                        &:hover {
                            transform: rotate(360deg);
                            -webkit-transform: rotate(360deg);
                            transition: all 0.8s;
                            -webkit-transition: all 0.8s;
                        }
                    }
                }

                &-bg {
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    border: 0;
                    background-image: url("../img/3.jpg");
                    background-size: cover;
                    background-repeat: no-repeat;
                    background-position: 50% 50%;
                    background-color: rgba(120, 120, 120, 0.1);
                }
            }

            &-bottom {
                padding: 24px;
                margin-top: 32px;
                text-align: center;

                p {
                    top: 0;
                }

                &-name {
                    display: inline-flex;
                    align-items: center;
                    margin-bottom: 16px;
                    line-height: 18px;
                    font-size: 14px;
                    height: 18px;

                }

                &-description {
                    font-size: 12px;
                    color: #888888;
                    line-height: 20px;
                }
            }
        }

    }

    //评论框
    &-comment {
        padding: 25px 20px;

        &-form {

            justify-content: space-between;
            flex-wrap: wrap;

            &-item {
                position: relative;
                width: 100%;

                &::before {
                    position: absolute;
                    content: "";
                    background-image: url(../img/logo.svg);
                    background-repeat: no-repeat;
                    background-size: 30%;
                    background-position: center center;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    z-index: 0;
                    opacity: .1;
                }

                &-textarea {
                    overflow: hidden;
                    resize: none;

                    background-color: transparent;
                    border-radius: 3px;

                }
            }

        }


    }

    //评论列表
    &-comment-list {
        &-title {
            flex-direction: row;
            justify-content: space-between;
            border-bottom: 3px solid $hovercolor;
            height: 55px;
            line-height: 55px;
            font-size: 18px;

            span {
                padding: 0 20px;

            }
        }

        &-box {
            padding: 10px 20px;
            border-bottom: 1px #f7f7f7 solid;
            margin-bottom: -1px;
            overflow: hidden;
            position: relative;

            &-user {
                clear: both;

                @include common_avatar;

                &-info {
                    display: block;
                    overflow: hidden;
                    box-sizing: border-box;

                    @include common_nickname;

                    &-content {
                        overflow: hidden;
                        font-size: 12px;
                        color: #333333;
                        line-height: 22px;
                        word-wrap: break-word;
                    }

                    @include common_bottom;
                }



            }

            &-children {
                padding-left: 75px;
                padding-top: 15px;
                position: relative;
                max-height: 400px;
                overflow: hidden;

                &-replylist {
                    border-top: 1px solid #f8f8f8;
                    margin-top: -1px;
                    padding: 15px 0;

                    @include common_avatar;

                    &-content {
                        display: block;
                        overflow: hidden;
                        box-sizing: border-box;
                        @include common_nickname;

                    }

                    @include common_bottom;
                }
            }

            &-children-more {
                max-height: 100% !important;
            }

        }

        &-load-more {
            justify-content: center;
            align-items: center;
            height: 45px;
        }
    }

    // 友链
    &-friend-link {

        &-title {
            height: 18px;
            line-height: 18px;
            padding: 10px 15px;
            border-bottom: 1px solid $linecolor;
        }

        &-box {
            flex-wrap: wrap;
            justify-content: flex-start;

            a {
                display: inline-block;
                height: 18px;
                padding: 5px 15px;
            }
        }
    }
}

// 重写表单数据
.form-box {
    padding-top: 20px;

    .layui-form-item {
        position: relative;

        .layui-form-label {
            color: $font-color;
            height: 20px;
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 150;
            padding: 0px 8px;
            width: auto;
            font-weight: 400;
            line-height: 20px;
            transition: top 0.2s ease;
            background-color: $bgwhite;
            font-size: 12px;
        }

        .layui-input-block {
            margin: 0 auto 25px;
            position: relative;
            height: 40px;
            box-sizing: border-box;
            border: 1px #f1f1f1 solid;

        }

        .layui-input {
            z-index: 150;
            background-color: transparent;
            position: absolute;
            border: none;
            position: absolute;
            padding-left: 10px;
            top: 0px;
            left: 5px;
            height: 40px;
        }

        .input-captcha {
            width: 50% !important;
            position: static !important;
            margin-left: 0 !important;
        }

        .layui-captcha {
            position: absolute;
            top: 0;
            right: 0;
            cursor: pointer;
            border-radius: 2px;
            z-index: 1000;
            width: 140px;
            height: 40px;
        }

        .layui-form-flexbox {
            justify-content: space-between;
            align-content: center;
            justify-self: center;
            font-size: 14px;
            color: $font-color;
            min-height: 20px;
            align-items: flex-end;

            &-left {
                align-items: flex-end;

                &-text {
                    color: $font-color;
                }

            }

            &-right {
                &-text {
                    color: $font-color;
                }
            }
        }
    }

    .layui-input-item-active,
    .layui-input-item-filled {
        .layui-form-label {
            top: -10px !important;
        }
    }
}

.mask {
    width: 100%;
    height: 100%;
    background-color: transparent;
    z-index: 998;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

// 空评论
.empty {
    position: relative;
    text-align: center;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    height: 200px;
    opacity: .5;

    span {
        font-size: 50px;
    }
}

.clear {
    clear: both;
}